<template>
  <div class="search_container searchArea">
        <el-form 
            :inline="true" 
            :model='search_data' 
            :rules="rules"
            ref="search_data" 
            class="demo-form-inline search-form">
            <el-form-item label="手机号">
                <el-input 
				v-model="search_data.mobile" 
				placeholder="手机号"  
				@keyup.enter.native='onScreeoutMoney("search_data")'>
				</el-input>
            </el-form-item>
			<el-form-item label="会员状态">
				<el-select v-model="search_data.status" placeholder="请选择">
					<el-option
					  v-for="item in options"
					  :key="item.value"
					  :label="item.label"
					  :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="注册时间">
                <el-date-picker
                    v-model="search_data.beginTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
                <el-date-picker
                    class="endTime"
                    v-model="search_data.endTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
			</el-form-item>
            <el-form-item>
                <el-button type="primary" size ="mini" icon="search" @click='onScreeoutMoney("search_data")'>筛选</el-button>
            </el-form-item>

            <!-- <el-form-item class="btnRight"> -->
                <!-- <el-button type="primary" size ="mini" icon="view" @click='onBatchDelMoney()' :disabled="searchBtnDisabled">批量删除</el-button> -->
                <!-- <el-button type="success" size ="mini" icon="view">导出Elcel</el-button> -->
                <!-- <el-button type="primary" size ="mini" icon="view" @click='onAddMoney()'>添加</el-button> -->
            <!-- </el-form-item> -->
        </el-form>
    </div>
</template>

<script>
   import { mapGetters } from 'vuex'

  export default {
      name:'searchItem',
      data(){
          return {
			 options: [{
			  value: 1,
			  label: '正常'
			}, {
			  value: 2,
			  label: '失效'
			}],
            search_data:{
				status: '',
                mobile:'',
                endTime: '',
                beginTime: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ]
            }
          }
      },
       computed:{
        ...mapGetters(['searchBtnDisabled']),

      },
      created(){
      },
      methods:{
          onScreeoutMoney(searchForm){
              this.$refs[searchForm].validate((valid) => {
					if (valid) {
                        this.$store.commit('SET_SEARCH',this.search_data);
                        this.$emit("searchList");
                    }
              })
          },
          onAddMoney(){
              this.$emit("showDialog",'add');
          },
          onBatchDelMoney(){
              this.$emit("onBatchDelMoney");
          }
      }
  }
</script>

<style lang="less" scoped>
    .search_container{
        margin-bottom: 20px;
    }
    .btnRight{
        float: right;
        margin-right: 0px !important;
    }
    .searchArea{
        background:rgba(255,255,255,1);
        border-radius:2px;
        padding: 18px 18px 0;
    }
	.search-form .el-form-item .el-date-editor{
		&.endTime{
            margin-left: 10px;
        }
    }
</style>
